<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>5-网页新闻列表案例</title>
		<style type="text/css">
			*{
				padding:0;
				margin:0;
			}
			a{
				text-decoration:none;
				color:#666666;
			}
			li{
				list-style:none;
			}
			body{
				line-height: 1;
			}
			.box{
				width:498px;
				height:398px;
				border:1px solid #cccccc;
				margin: 30px auto;
				/*上右下左*/
				padding: 42px 30px 0px 30px;
				box-sizing: border-box;
			}
			.box h2{
				padding-bottom: 9px;
				border-bottom: 1px solid #cccccc;
				font-size:29px;
			}
			ul li{
				height:50px;
				line-height: 50px;
				padding-left:30px;
				border-bottom: 1px dashed #cccccc;
			}
			ul li a{
				font-size:18px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<h2>最新文章/New Articles</h2>
			<ul>
				<li><a href="">北京招聘网页设计，平面设计，php</a></li>
				<li><a href="">体验javascript的魅力</a></li>
				<li><a href="">jquery世界来临</a></li>
				<li><a href="">网页设计师的梦想</a></li>
				<li><a href="">jquery中的链式编程是什么</a></li>
			</ul>
		</div>
	</body>
</html>
